﻿@model CoreHome.HomePage.ViewModels.DetailViewModel

@{
    ViewData["Title"] = "Detail";
}

<link rel="stylesheet" href="~/lib/viewerjs/dist/viewer.min.css" />
<link rel="stylesheet" href="~/css/blog/detail.min.css" />

<script src="~/lib/viewerjs/dist/viewer.min.js"></script>
<script src="~/lib/qrcodejs/qrcode.min.js"></script>
<script src="~/js/blog/detail.min.js"></script>

<div class="container mt-4 mb-5">
    <div class="row">

        <aside class="col-lg-3 d-none d-lg-block">

            @await Component.InvokeAsync("TopTags")
            <br />
            @await Component.InvokeAsync("Categories")

        </aside>

        <selection class="col-lg-9 col-md-12">
            <article>
                @if(ViewBag.Warning is not null)
                {
                    <div class="@ViewBag.Warning.Style alert-dismissible fade show">
                        @ViewBag.Warning.Content
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                }
                <header>
                    <h4 class="display-4">@Model.Article.Title</h4>
                    <hr>

                    <div class="d-md-block mb-2">
                        <strong class="text-muted">
                            <span>@Model.Article.Time.ToString()</span>
                            | China Standard Time
                            <svg id="btn-qrcode" onclick="showCode()" class="bi bi-upc-scan" data-toggle="modal" data-target="#qrcodeModal" width="23" height="23" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5zM3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-7zm3 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7z"></path>
                            </svg>
                        </strong>
                    </div>

                    <div class="modal fade" id="qrcodeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">@Model.Article.Title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div id="qrcode" class="text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>@Model.Article.Overview</p>

                    <div class="hidden-print">
                        <section>
                            <div class="float-right d-none d-md-block">
                                <span class="toptags-list">
                                    @foreach (var articleTag in Model.Article.ArticleTags)
                                    {
                                        <a class="btn btn-primary" asp-controller="Blog" asp-action="Tags" asp-route-id="@articleTag.Tag.TagName">
                                            @articleTag.Tag.TagName
                                        </a>
                                    }
                                </span>
                            </div>
                            <ul class="d-flex flex-row list-unstyled ul-cat-list-desktop mb-0">
                                <li>
                                    <a class="btn btn-sm btn-outline-success" asp-controller="Blog" asp-action="Categories" asp-route-id="@Model.Article.Category.CategoriesName">
                                        @Model.Article.Category.CategoriesName
                                    </a>
                                </li>
                            </ul>
                        </section>
                    </div>

                    <hr>
                </header>

                <section class="clearfix markdown">
                    <div class="loading container">
                        <div class="row"><div class="box box-6"></div></div>
                        <div class="row"><div class="box box-10"></div></div>
                        <div class="row"><div class="box box-4"></div></div>
                        <div class="row"><div class="box box-8"></div></div>
                        <div class="row"><div class="box box-3"></div></div>
                        <div class="row"><div class="box box-10"></div></div>
                        <div class="row"><div class="box box-4"></div></div>
                        <div class="row"><div class="box box-8"></div></div>
                        <div class="row"><div class="box box-3"></div></div>
                        <div class="row"><div class="box box-10"></div></div>
                        <div class="row"><div class="box box-6"></div></div>
                    </div>
                    <textarea hidden>@Model.Article.Content</textarea>
                </section>

                <hr class="my-4">
            </article>

            <form asp-controller="Blog" asp-action="Detail" method="post" class="card card-header p-3">
                <input type="hidden" value="@Model.Article.ArticleCode" name="ArticleCode" />

                <input type="email" value="@Model.CommentViewModel.Email" name="Email" class="form-control mb-3" placeholder="Email (Optional)" />
                <textarea class="form-control mb-3" rows="4" placeholder="Comment (Support Markdown)" maxlength="1024" name="Detail">@Model.CommentViewModel.Detail</textarea>

                <div class="row">
                    <div class="col-8">
                        <div class="input-group">
                            <img id="verfyImg" onclick="getVerfyCode(this)" src="/Service/VerificationCode" />
                            <input id="verificationCode" type="text" autocomplete="off" class="form-control" placeholder="Code" name="VerificationCode" value="@Model.CommentViewModel.VerificationCode" />
                        </div>
                    </div>
                    <div class="col">
                        <input id="btn_submit" type="submit" class="btn btn-success float-right" value="Submit" />
                    </div>
                </div>
            </form>

            <div id="comments" class="mt-4">

                @foreach (var comment in Model.Article.Comments)
                {
                    <div class="card comment-item mb-4">
                        <div class="card-header">
                            <small class="text-muted">@(comment.Email ?? "anonymous")</small>
                            <small class="text-muted font-weight-light float-right">@comment.Time.ToString("yyyy/MM/dd HH:MM")</small>
                        </div>

                        <div class="card-body markdown">
                            <div class="loading container">
                                <div class="row"><div class="box box-6"></div></div>
                                <div class="row"><div class="box box-10"></div></div>
                            </div>
                            <textarea hidden>@comment.Detail</textarea>
                        </div>
                    </div>
                }

            </div>
        </selection>

        <partial name="MarkdownRender" />
    </div>
</div>